<template>
  <div>
    <el-form size="small" ref="formData" :model="formData" class="form-container" :rules="rules" label-position="right"
             label-width="79px">
      <el-form-item label="用户名:">
        <span>{{user.username}}</span>
      </el-form-item>
      <el-form-item label="手机号:">
        <span>{{user.phone}}</span>
      </el-form-item>
      <el-tooltip v-model="capsTooltip" content="大写输入已开启" placement="right" manual>
        <el-form-item label="原密码:" prop="oldPassword">
          <el-input
            ref="oldPassword"
            name="oldPassword"
            :key="passwordType"
            v-model="formData.oldPassword"
            :type="passwordType"
            placeholder="修改后的登录密码"
            tabindex="1"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
          </span>
        </el-form-item>
      </el-tooltip>
      <el-tooltip v-model="capsTooltip" content="大写输入" placement="right" manual>
        <el-form-item prop="password" label="修改密码">
          <el-input
            ref="password"
            name="password"
            :key="passwordType"
            v-model="formData.password"
            :type="passwordType"
            placeholder="修改后的登录密码"
            tabindex="1"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
          </span>
        </el-form-item>
      </el-tooltip>
      <el-tooltip v-model="capsTooltip" content="大写输入已开启" placement="right" manual>
        <el-form-item prop="passwordRepeat" label="确认密码">
          <el-input
            :key="passwordType"
            v-model="formData.passwordRepeat"
            :type="passwordType"
            placeholder="确认修改后的登录密码"
            tabindex="1"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
          </span>
        </el-form-item>
      </el-tooltip>
      <div style="padding: 10px  0px 25px 0px">
        <el-form-item>
          <el-button size="middle" :loading="loading" type="primary"
                     style="width:100%;"
                     @click.native.prevent="submitForm">保存
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {pattern} from "@/utils/validate";
  import {updatePwd} from "@/api/user";

  export default {
    props: {
      user: {
        type: Object,
        default: {
          name: '',
          email: ''
        }
      }
    },
    data() {
      return {
        passwordType: 'password',
        capsTooltip: false,
        loading: false,
        formData: {
          password: '',
          oldPassword: ''
        },
        rules: {
          passwordRepeat: [
            {required: true, trigger: 'blur', message: "请再次输入密码"},
            {
              validator: (rule, value, callback) => {
                console.log("再次校验密码", value, this.formData.password)
                if (value === this.formData.password) {
                  callback()
                } else {
                  callback(new Error(""))
                }
              }, trigger: 'blur', message: "两次输入密码不一致"
            },
          ],
          oldPassword: [
            {required: true, trigger: 'blur', message: "原密码不能为空"},
          ],
          password: [
            {required: true, trigger: 'blur', message: "密码不能为空"},
            {pattern: pattern.password, trigger: 'blur', message: "密码1至12个英文或数字或特殊字符"},
          ]
        }
      }
    },
    methods: {
      checkCapslock(e) {
        const {key} = e
        this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
      }
      ,
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      }
      ,
      submitForm() {
        this.$business.saveOne(this, updatePwd, "login")
      },
    }
  }
</script>
<style lang="scss" scoped>

  .form-container {
    width: 40%;

    .el-form-item__label {
      width: 179px;
      font-weight: 700;
    }

    .tips {
      font-size: 14px;
      color: #f4516c;
      /*margin-bottom: 10px;*/

      span {
        &:first-of-type {
          /*margin-right: 16px;*/
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      /*color: $dark_gray;*/
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      /*top: 7px;*/
      font-size: 16px;
      color: #2d2f33;
      cursor: pointer;
      user-select: none;
    }
  }
</style>
